<template>
	<div class="attendrecordcontainer" v-if="Record">
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :close-on-click-modal="modalclose"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title">
			  	<span v-if="Record.type=='edite'">编辑考勤记录</span>
			  	<span v-else>考勤记录</span>
			  </div>
              <div class="courserecord">
              	 <div class="dialog">
	              	<div class="item" style="display: flex;height: auto;">
						<div class="box-item">
							<span class="spanlabel">姓名：</span>
							<div class="box-rightLabel">
								<span class="spanlabelweight" style="color:#2E7DF8;">{{Record.realName}}</span>
							</div>
						</div>
						<div class="box-item">
							<span class="spanlabel">报名课程：</span>
							<div class="box-rightLabel">
								<span class="spanlabelweight">{{Record.courseName}}</span>
							</div>
						</div>
						<div class="box-item">
							<span class="spanlabel">上课班级：</span>
							<div class="box-rightLabel">
								<span class="spanlabelweight">{{Record.className}}</span>
							</div>
						</div>
						<div class="box-item" v-if="Record.courseType!==2">
							<span class="spanlabel">课次：</span>
							<div class="box-rightLabel">
								<span class="spanlabelweight">第{{Record.orderBy}}次</span>
							</div>
						</div>
						<div class="box-item" v-else>
							<span class="spanlabel">日期：</span>
							<div class="box-rightLabel">
								<span class="spanlabelweight">{{Record.startTime?Record.startTime.split(' ')[0]:'-'}}</span>
							</div>
						</div>
	              		<!-- <el-row>
	              			<el-col :span="6">
	              				<span class="spanlabel">姓名：</span>
	              				<span class="spanlabelweight" style="color:#2E7DF8;">{{Record.realName}}</span>
	              			</el-col>
	              			<el-col :span="6">
	              				<span class="spanlabel">报名课程：</span>
	              				<span class="spanlabelweight">{{Record.courseName}}</span>
	              			</el-col>
	              			<el-col :span="8">
	              				<span class="spanlabel">上课班级：</span>
	              				<span class="spanlabelweight">{{Record.className}}</span>
	              			</el-col>
	              			<el-col  v-if="Record.courseType!==2" :span="4">
	              				<span class="spanlabel">课次：</span>
	              		        <span class="spanlabelweight">第{{Record.orderBy}}次</span>
	              			</el-col>
							<el-col v-else :span="4">
	              				<span class="spanlabel">日期：</span>
	              		        <span class="spanlabelweight">{{Record.startTime?Record.startTime.split(' ')[0]:'-'}}</span>
	              			</el-col>
	              		</el-row> -->
	              	</div>
	              	<div class="item">
	              		<span class="spanlabel">上课时间：</span>
	                    <span class="spanlabelweight">{{Record.startTime}}</span>
	              	</div>
	              	<div class="item">
	              		<span class="spanlabel">上课教师：</span>
	              		<span class="spanlabelweight">{{Record.teacherUserName}}</span>
	              	</div>
	              	<div class="item">
	              		<span class="spanlabel">学员状态：</span>
	              		<span class="spanlabelweight" v-if="Record.courseStatus==1">待上课</span>
	              		<span class="spanlabelweight" v-else-if="Record.courseStatus==2">上课中</span>
	              		<span class="spanlabelweight" v-else-if="Record.courseStatus==3">已退费</span>
	              		<span class="spanlabelweight" v-else-if="Record.courseStatus==4">已退课</span>
	              		<span class="spanlabelweight" v-else-if="Record.courseStatus==5">停课</span>
	              		<span class="spanlabelweight" v-else-if="Record.courseStatus==6">已结课</span>
	              	</div>
	              	<div class="item">
	              		<span class="spanlabel">签到时间：</span>
	              		<span class="spanlabelweight">{{Record.signinTime}}</span>
	              	</div>
	              	<div class="item">
	              		<span class="spanlabel">签到状态：</span>
	              		
	              		<el-select v-model="Record.signinMode" size="mini" disabled v-if="Record.type=='query'"   placeholder="签到">
						    <el-option
						      v-for="item in signState"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
					    </el-select>
					    <el-select v-model="Record.varsigninMode" size="mini" @change="changetype"  v-else >
						    <el-option
						      v-for="item in signState"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
					    </el-select>
					  <!--<el-select v-if="leave" v-model="classtext"  size="mini" placeholder="请选择补课班级">
						    <el-option
						      v-for="item in classlist"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
					  </el-select>-->
	              	</div>
	              	<div class="item">
              		<span class="spanlabel">消耗：</span>
              		<span class="spanlabelweight" v-if="Record.courseType==2">{{Record.consumeHour}}(天)</span>
              		<span class="spanlabelweight" v-else>{{Record.consumeHour}}(课时)</span>
              	</div>
                </div>
              </div>
		      <div slot="footer" class="footer-btn" v-if="Record.type=='edite'">
		      	
		      	 <el-button @click="btnCancel" class="btnCancel">取 消</el-button>
    			 <el-button @click="btnOk" class="btnOk">确 定</el-button>
    			 <!-- <el-button  class="btnOk" v-else style="cursor:not-allowed;color: #999999;background-color: #dedede;">确 定</el-button> -->
		      </div>
			  <div  class="box-attenceAppraise">
				  <attenceAppraiseEle v-for="(row1,index1) in attenceAppraiseList" :key="'a'+index1"
				  	v-model="attenceAppraiseList[index1]"
				   :attenceAppraiseEle="row1"></attenceAppraiseEle>
				  <attenceAppraiseEle v-for="(row2,index2) in evaluateReplyList" :key="'r'+index2"
				  	v-model="evaluateReplyList[index2]"
				   :attenceAppraiseEle="row2"></attenceAppraiseEle>
			  </div>
		</el-dialog>
	</div>
	
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import attenceAppraiseEle from './attenceAppraiseEle'
	let vm;
	export default{
		components:{attenceAppraiseEle},
		props:["Record"],
		data(){
			return {
				modalclose:false,
			    signState:[],
				classtext:'',
				classlist:[
				    {name:'创意美术(001)',value:'1'},
				    {name:'日常英语(002)',value:'2'},
				],
				leave:false,//是否请假

				attenceAppraiseEleVisible:false,
				attenceAppraiseList:[],
				evaluateReplyList:[]
			}
		},
		methods:{
			
			initData(){
				let dicdata = tool.getItem(lsKey.dict,true);
                this.signState=dicdata["signin_mode"];
               
			},
			handleClose(){
				console.log(this.Record)
				this.attenceAppraiseEleVisible=false;
				this.$store.dispatch('editorAttenceRecord/hideeditorRecordPanel');	
			},
			btnCancel(){
				this.attenceAppraiseEleVisible=false;
				this.$store.dispatch('editorAttenceRecord/hideeditorRecordPanel');	
			},
			/**
			 * 确定修改
			 */
			btnOk(){
				// let paras={
				// 	classSigninId:this.Record.classSigninId,
				// 	classSyllabusId:this.Record.classSyllabusId,
				// 	studentId:this.Record.studentId,
				// 	signinMode:this.Record.varsigninMode,
				// 	consumeHour:this.Record.consumeHour
				// }
				let paras=[{
					classSyllabusId: this.Record.classSyllabusId,
					classId:this.Record.classId,
					studentId: this.Record.studentId,
					signinMode: this.Record.varsigninMode,
					// consumeHour: this.Record.consumeHour,
					// siginUserId: this.userId,
					classSigninId:this.Record.classSigninId,
					// signinTime: tool.getTimeObjByType(-1).now,
					// clueId:row.clueId||''
				}];
				//console.log(paras)
				// if(paras.signinMode!=4){
				// 		vm.$message({
				// 	          message: '请将状态更改为补课',
				// 	          type: 'warning'
        		// 		});
                //     return;
				// }
				
				// api.updateAttendence(paras).then(function(data){
				// 	console.log(data)
				// 	if(data.result=="操作成功"){
				// 		vm.$message({
				// 	          message: '修改成功',
				// 	          type: 'success'
				// 		});
				// 		self.attenceAppraiseEleVisible=false;
				// 		vm.$store.dispatch('editorAttenceRecord/hideeditorRecordPanel');
				// 		vm.$parent.initData();
				// 	}
				// });
				api.updateAttendenceBatch(paras).then(function(d){
					if(d.resultCode==2000){
						if(!d.conflictRow||d.conflictRow.length==0)
							vm.$message({
								message: '修改成功',
								type: 'success'
							});
						else
							vm.$message({
								message: d.conflictRow[0],
								type: 'warning'
							});

						vm.attenceAppraiseEleVisible=false;
						vm.$store.dispatch('editorAttenceRecord/hideeditorRecordPanel');
						vm.$parent.initData();
					}
					else{
						vm.$message({
							message: d.message||'操作失败！',
							type: 'warning'
						});
					}
					
				});
				
			},
			changetype(val){
				//alert(val)
			    if(val!=3){
			    	this.Record.consumeHour=this.Record.classHour;
			    	
			    }else{
			    	this.Record.consumeHour=0;
			    }
					

			},
			/**获取评价数据 */
			updateAppraise(row){
				let self=this;
				if(row)
				{
					this.attenceAppraiseEleVisible=true;
					api.getStudentAttenceAppraise(
						{
						studentId:row.studentId,
						syllabusId:row.classSyllabusId
						}
					).then(function(d){
						if(d.result=='操作成功'){
							self.attenceAppraiseList=d.info.evaluateInfoList;
							let evaluateReplyList=[];
							d.info.evaluateReplyList.forEach(element => {
								evaluateReplyList.push({
									type:element.type,
									createTime:element.createTime,
									userName:element.userName,
									evaluate:element.replyComment,
									pictureList:element.pictureList,
									reply:true
								});
							});
							self.evaluateReplyList=evaluateReplyList;
						}
					});
				}
			}
		},
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.editorAttenceRecord.editorRecordDialog					
					})
       },
       mounted(){
       	this.initData();
       	vm=this;
       }
	}
</script>

<style lang="scss">	
	@import "@/style/module/utils.scss";
	.attendrecordcontainer{
		.courserecord{
			width:100%;
			max-height: 4rem;
			padding:0 .3rem;			
			.item{
				width:100%;
				height: .5rem;
				line-height: .5rem;		
				.box-item{
					width: 25%;
					display: flex;
					.spanlabel{
						display: inline-block;
						height: 100%;
						width: 0.8rem;
						line-height: 0.25rem;
					}
					.box-rightLabel{
						height: 100%;
						width: 1.5rem;
						line-height: 0.25rem;
					}
				}		
			}
		}
		/**自定义对话框标题样式**/
		.panel_title{				
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #FFFFFF;
			width:10rem !important;
			margin-top:15vh !important;
			border-radius: .1rem;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
				padding-bottom: 0.16rem !important;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
		.box-attenceAppraise{
			width: 100%;
			padding: 0rem 0.16rem;
			margin: 0.16rem 0;
		}
	}
</style>